<template>
  <div class="top-container">
      <div class="outer-container">
        <div class="search-zone">
            <search-input></search-input>
            <span>|</span>
            <router-link to='' class="my-date">我的预约</router-link>
        </div>
        <div class="img-container common-adv-box">
            <img src="../../../static/img/banner.png" alt="">
        </div>
        <div class="info-container">
            <layout>
                <div slot="left">
                    <condition-filter 
                        :title="'省份'"
                        :items="city" 
                        :unique_field="'province_id'" 
                        :changeTab="changeTab"
                        :can_unfold="true"
                        :name="'province_name'"></condition-filter>
                    <condition-filter 
                        :title="'城市'"
                        :items="city_list" 
                        :unique_field="'city_id'" 
                        :can_unfold="true"
                        :changeTab="changeTab"
                        :name="'city_name'"></condition-filter>
                    <condition-filter 
                        :title="'项目'"
                        :items="category_list" 
                        :unique_field="'category_id'" 
                        :can_unfold="true"
                        :changeTab="changeTab"
                        :name="'name'"></condition-filter>
                    <condition-filter 
                        :title="'综合排序'"
                        :items="[{order_by:'reserve_count',name:'预约最多'}]" 
                        :unique_field="'order_by'" 
                        :changeTab="changeTab"
                        :name="'name'"></condition-filter>

                        <p>共<i class="orange-color orange-border-bottom">13</i>位医生</p>
                        <div class="hospital-list">
                            <doctor></doctor>
                        </div>
                </div>
                <div slot="right">
                    <product-aside></product-aside>
                </div>
            </layout>
        </div>
      </div>
  </div>
</template>
<script>
    import SearchInput from '@/view/Search/Input';
    import Layout from '@/components/Layout';
    import ConditionFilter from '@/components/Tools/ConditionFilter';
    import areaData from '@/store/area';
    import { mapState,mapMutations } from 'vuex';
    import Doctor from '@/components/Doctor/Doctor';
    import ProductAside from '@/components/Product/ProductAside';
    export default{
        components:{
            SearchInput,
            Layout,
            ConditionFilter,
            Doctor,
            ProductAside,
        },
        data(){
            return{
                city: [],
                city_list:[],
                query_contition: {},
            }
        },
        created(){
            this.city = areaData.data;
            this.getPlasticlist();
        },
        computed:mapState(['category_list']),
        methods: {
            ...mapMutations(['getPlasticlist']),
            changeTab(unique_field,unique_field_value,index){
                if(!unique_field_value){
                    delete this.query_contition[unique_field];
                }else{
                    this.query_contition[unique_field] = unique_field_value;
                }
                if(unique_field == 'province_id'){
                    this.city_list = this.city[index]?this.city[index].city_list:[];
                   if(!unique_field_value){
                      delete this.query_contition.city_id;
                   }
                }
                    console.log(this.query_contition);
            }
        }
    }
</script>
<style lang="less" scoped>
    span{
        margin: 0 25px;
    }
    .my-date{
        display: inline-block;
        padding-left: 30px;
        line-height: 40px;
        background: url(../../../static/img/my_date.png) no-repeat left center;
        background-size: 22px 22px;
    }
    .info-container{
        margin-top: 30px;
        background-color: #fff;
        p{
            margin-left: 20px;
            margin-top: 40px;
        }
        .hospital-list{
            padding: 20px;
            margin-left: 40px;
        }
    }
</style>

